<template>
  <section class="section">
    <header class="header">
      <div class="left">
        <img class="img" src="../../assets/logo/logo.png" alt="" /><span
          class="title"
          >医疗救援调度辅助分析决策系统</span
        >
      </div>
      <div class="right">{{ date }} 某某市120指挥系统</div>
    </header>
    <main class="main">
      <div class="left">
        <div class="tab">
          <div :class="['tab-0', { active: tabActive == 0 }]">GIS决策系统</div>
          <div :class="['tab-1', { active: tabActive == 1 }]">GIS信息系统</div>
        </div>
        <div class="group">
          <span
            :class="{ text: groupActive == 0 }"
            @click="changeGroupActive(0)"
            >综合调度</span
          >
          <span
            :class="{ text: groupActive == 1 }"
            @click="changeGroupActive(1)"
            >车辆优先</span
          >
          <span
            :class="{ text: groupActive == 2 }"
            @click="changeGroupActive(2)"
            >分站优先</span
          >
        </div>
        <div class="content">
          <div v-if="groupActive == 0" class="synthetic">
            <div
              v-for="(item, index) in syntheticList"
              :key="item.TABLE_UUID"
              :class="{
                synthetic_item: true,
                synthetic_active: syntheticActive == index,
              }"
              @click="getSynMap(item.carList, index)"
            >
              <img
                src="../../assets/images/医院.png"
                width="25"
                height="25"
                style="vertical-align: middle; margin: 0 5px"
                alt=""
              />
              <span style="margin-left: 15px">{{ item.ORG_NAME }} </span>
            </div>
          </div>
          <div v-else-if="groupActive == 1" class="car">
            <el-table :data="vehicleList" stripe border height="300">
              <el-table-column prop="ORG_NAME" label="所属分站" fixed>
              </el-table-column>
              <el-table-column prop="CAR_NO" label="车辆名称">
              </el-table-column>
              <el-table-column prop="DISTANCE" label="公里数">
              </el-table-column>
            </el-table>
          </div>
          <div v-else class="substation">
            <el-table :data="siteList" stripe border height="300">
              <el-table-column prop="ORG_NAME" label="分站名称" fixed>
              </el-table-column>
              <el-table-column prop="DISTANCE" label="公里数">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="right">
        <div id="syntheticMap"></div>
      </div>
    </main>
    <footer class="footer">
      <EventCar ref="event" @eventInfo="eventInfo" />
    </footer>
  </section>
</template>
<script>
import { parseTime } from "@/utils/ruoyi.js";
import {
  gisSynthetic,
  gisVehiclePriority,
  gisSitePriority,
} from "@/api/gpsAnalysis/gpsAnalysis.js";
import EventCar from "./components/eventCar";
export default {
  components: {
    EventCar,
  },
  data() {
    return {
      date: "",
      tabActive: 0,
      groupActive: 0,
      syntheticActive: 0,
      syntheticList: [],
      vehicleList: [],
      siteList: [],
    };
  },
  computed: {},
  mounted() {
    this.getGisSynthetic();
    this.$nextTick(() => {
      this.date = parseTime(new Date());
    });
  },
  methods: {
    getGisSitePriority(val) {
      let eventList = this.$refs.event.eventList;
      if (!eventList.length) {
        return;
      }
      let { LONGITUDE, LATITUDE } = eventList[0];
      let data = {
        LONGITUDE: val ? val.LONGITUDE : LONGITUDE,
        LATITUDE: val ? val.LATITUDE : LATITUDE,
      };
      gisSitePriority(data).then((res) => {
        this.siteList = res.result;
        this.getSiteMap(eventList);
      });
    },
    getGisVehiclePriority(val) {
      let eventList = this.$refs.event.eventList;
      if (!eventList.length) {
        return;
      }
      let { LONGITUDE, LATITUDE } = eventList[0];
      let data = {
        LONGITUDE: val ? val.LONGITUDE : LONGITUDE,
        LATITUDE: val ? val.LATITUDE : LATITUDE,
      };
      gisVehiclePriority(data).then((res) => {
        this.vehicleList = res.result;
        this.getVehMap(eventList);
      });
    },
    getGisSynthetic() {
      gisSynthetic().then((res) => {
        this.syntheticList = res.result;
        this.getSynMap(
          this.syntheticList.length ? this.syntheticList[0].carList : "",
          this.syntheticActive
        );
      });
    },
    initMap() {
      let map = new BMapGL.Map("syntheticMap");
      let point = new BMapGL.Point(117.23, 31.82);
      map.centerAndZoom(point, 14);
      map.enableScrollWheelZoom(true);
      return map;
    },
    getSynMap(carList, index) {
      this.syntheticActive = index;
      let map = this.initMap();
      //先清空上次覆盖物
      map.clearOverlays();
      if (!carList || !carList.length) {
        return;
      }
      // 创建小车图标
      const url = require("../../assets/images/救护车.png");
      let myIcon = new BMapGL.Icon(url, new BMapGL.Size(32, 36));
      carList.forEach((item) => {
        // 创建Marker标注，使用小车图标
        let pt = new BMapGL.Point(item.CAR_LONGITUDE, item.CAR_LATITUDE);
        let marker = new BMapGL.Marker(pt, {
          icon: myIcon,
        });
        // 创建图文信息窗口
        let sContent = `<div class="synMap">
        <ul style="list-style:none;padding-left: 15px;">
          <li>车牌号:<span>${item.CAR_NO}</span></li>
          <li>受理编号:<span>${item.ACCEPTANCE_NO}</span></li>
          <li>呼叫时间:<span>${item.CALL_TIME}</span></li>
          <li>病情:<span>${item.DISEASE_NAME}</span></li>
          <li>剩余路程:<span>${item.REMAINING_DISTANCE}</span></li>
          <li>所需时间:<span>${item.REQUIRED_TIME}</span></li>
          <li>预计到达时间:<span>${item.EXPECT_ARRIVE_TIME}</span></li>
        </ul>
      </div>`;
        let infoWindow = new BMapGL.InfoWindow(sContent, {
          width: 400,
          height: 200,
          title: "车辆信息",
        });
        // marker添加点击事件
        marker.addEventListener("click", function () {
          map.openInfoWindow(infoWindow, pt);
        });
        // 将标注添加到地图
        map.addOverlay(marker);
      });
    },
    getVehMap(eventList) {
      let map = this.initMap();
      map.clearOverlays();
      if (!this.vehicleList.length) {
        return;
      }
      // 创建小车图标
      const urlCar = require("../../assets/images/救护车.png");
      const urlPosition = require("../../assets/images/定位.png");
      let carIcon = new BMapGL.Icon(urlCar, new BMapGL.Size(32, 36));
      let posIcon = new BMapGL.Icon(urlPosition, new BMapGL.Size(32, 36));
      this.vehicleList.forEach((item) => {
        // 创建Marker标注，使用小车图标
        let pt = new BMapGL.Point(item.CAR_LONGITUDE, item.CAR_LATITUDE);
        let marker = new BMapGL.Marker(pt, {
          icon: carIcon,
        });
        // 将标注添加到地图
        map.addOverlay(marker);
      });
      eventList.forEach((item) => {
        let pt = new BMapGL.Point(item.LONGITUDE, item.LATITUDE);
        let marker = new BMapGL.Marker(pt, {
          icon: posIcon,
        });
        // 创建图文信息窗口
        let sContent = `${item.ACCEPTANCE_NO}`;
        let infoWindow = new BMapGL.InfoWindow(sContent, {
          title: "受理事件",
        });
        // marker添加点击事件
        marker.addEventListener("click", function () {
          map.openInfoWindow(infoWindow, pt);
        });
        map.addOverlay(marker);
      });
    },
    getSiteMap(eventList) {
      let map = this.initMap();
      map.clearOverlays();
      if (!this.siteList.length) {
        return;
      }
      const urlhos= require("../../assets/images/医院.png");
      const urlPosition = require("../../assets/images/定位.png");
      let hosIcon = new BMapGL.Icon(urlhos, new BMapGL.Size(32, 36));
      let posIcon = new BMapGL.Icon(urlPosition, new BMapGL.Size(32, 36));
      this.siteList.forEach((item) => {
        let pt = new BMapGL.Point(item.ORG_LONGITUDE, item.ORG_LATITUDE);
        let marker = new BMapGL.Marker(pt, {
          icon: hosIcon,
        });
         // 创建图文信息窗口
        let sContent = `${item.ORG_NAME}`;
        let infoWindow = new BMapGL.InfoWindow(sContent, {
          title: "站点",
        });
        // marker添加点击事件
        marker.addEventListener("click", function () {
          map.openInfoWindow(infoWindow, pt);
        });
        map.addOverlay(marker);
      });
      eventList.forEach((item) => {
        let pt = new BMapGL.Point(item.LONGITUDE, item.LATITUDE);
        let marker = new BMapGL.Marker(pt, {
          icon: posIcon,
        });
         // 创建图文信息窗口
        let sContent = `${item.ACCEPTANCE_NO}`;
        let infoWindow = new BMapGL.InfoWindow(sContent, {
          title: "受理事件",
        });
        // marker添加点击事件
        marker.addEventListener("click", function () {
          map.openInfoWindow(infoWindow, pt);
        });
        map.addOverlay(marker);
      });
    },
    changeGroupActive(i) {
      this.groupActive = i;
      const methods = {
        0: () => {
          this.getGisSynthetic();
        },
        1: () => {
          this.getGisVehiclePriority();
        },
        2: () => {
          this.getGisSitePriority();
        },
      };
      methods[i]();
    },
    eventInfo(val) {
      if (this.groupActive == 1) {
        this.getGisVehiclePriority(val);
      }
      if (this.groupActive == 2) {
        this.getGisSitePriority(val);
      }
    },
  },
};
</script>
<style scoped lang='scss'>
.synMap {
  border: 1px #dda8ae solid;
  width: 400px;
  //height: 200px;
  //padding: 40px;
  background: rgba($color: white, $alpha: 0.7);
}
.section {
  background: #f5f5f5;
  height: 100%;
  .header {
    display: flex;
    .left {
      padding: 0 20px;
      flex: 2;
      height: 40px;
      line-height: 40px;
      color: white;
      font-weight: bold;
      background: #3b403a;
      position: relative;
      &::after {
        content: "";
        width: 0;
        height: 0;
        right: 0px;
        border: 20px #3b403a solid;
        border-right-color: #00b384;
        border-bottom-color: #00b384;
        position: absolute;
      }
      .img {
        width: 40px;
        height: 40px;
        margin-right: 15px;
      }
      .title {
        vertical-align: top;
        font-size: 20px;
      }
    }
    .right {
      flex: 1;
      height: 40px;
      background: #00b384;
      line-height: 40px;
      color: white;
      text-align: center;
    }
  }
  .main {
    display: flex;
    .left {
      flex: 1;
      .tab {
        height: 40px;
        line-height: 40px;
        background: #23262e;
        color: grey;
        display: flex;
        justify-content: space-around;
        .active {
          color: white;
          border-bottom: 3px #60bb7a solid;
        }
        .tab-0,
        .tab-1 {
          padding: 0 10px;
          &:hover {
            cursor: pointer;
          }
        }
      }
      .group {
        height: 40px;
        background: white;
        line-height: 40px;
        span {
          &:hover {
            cursor: pointer;
          }
        }
        .text {
          color: #098b81;
        }
        span {
          margin: 0 10px;
        }
      }
      .content {
        height: 60vh;
        background: white;
        .synthetic {
          background: #3d414e;
          height: 100%;
          overflow-y: auto;
          .synthetic_active {
            border-left: 5px #029284 solid;
          }
          .synthetic_item {
            &:hover {
              cursor: pointer;
              opacity: 0.8;
              background: #3d414e;
            }
            padding-left: 10px;
            color: rgba($color: white, $alpha: 0.8);
            height: 50px;
            line-height: 50px;
          }
        }
        .car {
          height: 100%;
          overflow: auto;
          border-bottom: 1px grey solid;
        }
      }
    }
    .right {
      flex: 6;
      #syntheticMap {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
